<template>
    <div>
        <h3>我的收藏</h3>
        <ul class="like">
            <!-- 循环vuex里的收藏数据 -->
            <li v-for="item in $store.state.shoplike" :key="item.product_id">
                <span :style="{marginLeft:'263px'}" @click="out(item)">X</span>
                <img :src="item.product_picture">
                {{item.product_name}}
                <p :style="{color:'red'}">￥：{{item.product_price}}元</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    mounted() {},
    methods: {
        // 删除收藏
        out(item){
            
            this.$confirm('此操作将删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store.commit("out",item)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        }
    },
};
</script>

<style lang='scss'>
.like{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li{
        width: 24%;
        display: flex;
        flex-direction: column;
        border: 1px solid #ccc;
        align-items: center;
        margin: 4px;
        img{
            width: 80%;
            margin: 0 auto;
        }
    }
}
</style>
